<template>
  <el-tabs v-if="list.length>0" v-model="activeName" @tab-click="handleClick" @tab-remove="removeTab" :closable="true">
    <el-tab-pane :label="item.name" :name="index+''" v-for="(item,index) in list" :key="item.param.id">
      <div :is="item.key" :param="item.param" :url="item.url"></div>
    </el-tab-pane>
  </el-tabs>
  <home v-else></home>
</template>
<script>
import Bus from 'event/bus.js'
import tablelist from '../../views/tableList.vue'
import iframebox from 'components/iframe/iframe.vue'
import tableconfig from 'components/config/Config.vue'
import home from '../../views/home.vue'
export default {
  data() {
    return {
      activeName: null,
      nowId:null,
      list: [
        // { name: 'name0', key: 'tablelist', show: true, param: { id: 1000 } },
        // { name: 'name1', key: 'tablelist', show: true, param: { id: 1001 } },
        // { name: 'name2', key: 'tablelist', show: true, param: { id: 1002 } },
        // { name: 'name3', key: 'tablelist', show: true, param: { id: 1003 } },
        // { name: 'name4', key: 'tablelist', show: true, param: { id: 1004 } },
        // { name: 'name5', key: 'tablelist', show: true, param: { id: 1005 } },
        // { name: 'name6', key: 'tablelist', show: true, param: { id: 1006 } }
      ]
    };
  },
  computed: {
    // liveList() {
    //   let tem = [];
    //   this.list.forEach((value, index) => {
    //     if (value.show)
    //       tem.push(value)
    //   })
    //   return tem;
    // }
  },
  components: {
    tablelist,
    tableconfig,
    home,
    iframebox
  },
  methods: {
    handleClick(tab, event) {
      // console.log(this.list[this.activeName].param.id);
      this.nowId = this.list[this.activeName].param.id;
       Bus.$emit('changeMenu', this.nowId);
    },
    removeTab(targetName) {

      console.log(targetName)
      console.log(this.activeName)
      if(targetName == this.activeName){   //删除当前选中项
        if(targetName != 0){
          // this.list.splice(targetName, 1)
          this.activeName = this.activeName - 1 + '';
        }else{
          this.list.splice(targetName, 1)

          if(this.list.length == 0){

          }else{
            this.activeName = 0 + '';
          }
          

          
        }
      }else{
        if (targetName < this.activeName) {
          // console.log('小于')
          this.list.splice(targetName, 1)
          this.activeName = this.activeName - 1 + '';
        } else{
          this.list.splice(targetName, 1)
          // console.log('大于等于',this.activeName)
          if(targetName == this.list.length){
            this.activeName = '0';
          }
        }
      }
      

      if(this.list.length == 0){
        $('.nav .el-menu ul li').removeClass('is-active')
      }else{
          $('.nav .el-menu ul li').removeClass('is-active')
          let liid = this.list[this.activeName].param.id

          $('.nav .el-menu ul li#'+liid).addClass('is-active')
      }
      

    }
  },
  mounted() {
    Bus.$on('navId', (name, key, id) => { //来自导航栏ID
      let isIn = false;
      let inIndex = null;
      console.log(name, key, id)
      this.list.forEach((value, index) => {
        if (value.param.id == id) {
          isIn = true;
          inIndex = index;
        }
      })
      if (isIn) {
        this.activeName = inIndex + '';
      } else {
        if (this.list.length == 0) {
          this.list.push({ name: name, key: key, param: { id: id } })
          this.activeName = "0"
        } else {
          this.list.splice(Number(this.activeName) + 1, 0, { name: name, key: key, param: { id: id } })
          this.activeName = Number(this.activeName) + 1 + "";
        }
        
      }
    });
    Bus.$on('srearchId', (name, id , url) => { //来自搜索框ID
      console.log('来自搜索框', name, id,url)
      let isIn = false;
      let inIndex = null;
      this.list.forEach((value, index) => {
        if (value.param.id == id) {
          isIn = true;
          inIndex = index;
        }
      })
      if (isIn) {
        this.activeName = inIndex + '';
      } else {
         if (this.list.length == 0 && !url) {
          this.list.push({ name: name, key: 'tablelist', param: { id: id }})
          this.activeName = "0"
        } else {
          if(url){
            this.list.splice(Number(this.activeName) + 1, 0, { name: name, key: 'iframebox', param: { id: id ,url: url}})
          }else{
            this.list.splice(Number(this.activeName) + 1, 0, { name: name, key: 'tablelist', param: { id: id , url: url}})
          }
          
          this.activeName = Number(this.activeName) + 1 + "";
        }
        console.log(this.list, this.activeName)
      }
    });
    Bus.$on('slidebarTrigger', (type, name, id , url) => { //来自侧边栏
      console.log('来自侧边栏', type, name, id,url)
      if(type === 'table') type = 'tablelist'
      let isIn = false;
      let inIndex = null;
      this.list.forEach((value, index) => {
        if (value.param.id == id) {
          isIn = true;
          inIndex = index;
        }
      })
      if (isIn) {
        this.activeName = inIndex + '';
      } else {
         if (this.list.length == 0 && !url) {
          this.list.push({ name: name, key: type, param: { id: id }})
          this.activeName = "0"
        } else {
          if(url){
            this.list.splice(Number(this.activeName) + 1, 0, { name: name, key: 'iframebox', param: { id: id ,url: url}})
          }else{
            this.list.splice(Number(this.activeName) + 1, 0, { name: name, key: type, param: { id: id , url: url}})
          }
          
          this.activeName = Number(this.activeName) + 1 + "";
        }
        console.log(this.list, this.activeName)
      }
    });
  }
}

</script>
<style lang="less">
.el-tabs {
  display: flex;
  flex-direction: column;
  .el-tabs__header {
    margin-bottom: 0;
    height: 35px;
    background: #d0d0d0;
    .el-tabs__nav-wrap {
      height: 35px;
      &.is-scrollable {
        padding: 0 18px;
      }
    }
    .el-tabs__active-bar {
      display: none;
    }
    .el-tabs__nav-prev,
    .el-tabs__nav-next {
      height: 35px;
      width: 18px;
      line-height: 35px;
      text-align: center;
      z-index: 2;
      i {
        display: inline-block;
      }
    }
    .el-tabs__nav-prev {
      border-right: 1px solid #bababa;
    }
    .el-tabs__nav-next {
      border-left: 1px solid#bababa;
    }
    .el-tabs__item {
      background: #d0d0d0;
      line-height: 35px;
      height: 35px;
      text-align: center;
      border-right: 1px solid #bababa;
      &:last-child {
        border-right: none;
      }
      .el-icon-close {
        font-size: 12px;
        margin-left: 8px;
      }
    }
    .el-tabs__nav-scroll {
      height: 35px;
    }
    .el-tabs__item.is-active {
      background: #f2f2f2;
      color: #666;
    }
  }
  .el-tabs__content {
    flex: 1;
    display: flex;
    .el-tab-pane {
      flex: 1;
      display: flex;
      .tablelist {
        display: flex;
      }
    }
  }
}

</style>
